'use client';

import { useState, useRef } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Plus, X, Users, MessageSquare, Settings } from 'lucide-react';
import Draggable from 'react-draggable';

// 扩展 Window 接口以包含 electronAPI
declare global {
  interface Window {
    electronAPI?: {
      createTestWindow: () => Promise<any>;
      closeAllTestWindows: () => Promise<void>;
      getWindowInfo: () => any;
    };
  }
}

export default function TestTools() {
  const [isVisible, setIsVisible] = useState(false);
  const [testWindows, setTestWindows] = useState<number[]>([]);
  const wasDragged = useRef(false);

  const createTestWindow = async () => {
    if (window.electronAPI) {
      try {
        await window.electronAPI.createTestWindow();
        setTestWindows(prev => [...prev, Date.now()]);
      } catch (error) {
        console.error('创建测试窗口失败:', error);
      }
    } else {
      console.warn('Electron API 不可用，可能不在 Electron 环境中');
    }
  };

  const closeAllTestWindows = async () => {
    if (window.electronAPI) {
      try {
        await window.electronAPI.closeAllTestWindows();
        setTestWindows([]);
      } catch (error) {
        console.error('关闭测试窗口失败:', error);
      }
    }
  };

  const createMultipleWindows = async (count: number) => {
    for (let i = 0; i < count; i++) {
      await createTestWindow();
      await new Promise(resolve => setTimeout(resolve, 200));
    }
  };

  return (
    <Draggable
      handle=".handle"
      cancel=".no-drag"
      onDrag={() => {
        wasDragged.current = true;
      }}
      onStop={() => {
        requestAnimationFrame(() => {
          wasDragged.current = false;
        });
      }}
    >
      <div className="fixed bottom-4 right-4 z-50">
        {!isVisible ? (
          <Button
            variant="outline"
            size="sm"
            onClick={() => {
              if (wasDragged.current) return;
              setIsVisible(true);
            }}
            className="flex flex-row items-center handle cursor-move"
          >
            <Settings className="w-4 h-4 mr-2" />
            <span>测试工具</span>
          </Button>
        ) : (
          <Card className="w-80 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
            <CardHeader className="pb-3 handle cursor-move">
              <div className="flex items-center justify-between">
                <CardTitle className="text-sm text-wechat">测试工具</CardTitle>
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => setIsVisible(false)}
                  className="no-drag"
                >
                  <X className="w-4 h-4" />
                </Button>
              </div>
            </CardHeader>
            <CardContent className="space-y-3">
              <div className="grid grid-cols-2 gap-2">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={createTestWindow}
                  className="text-xs"
                >
                  <Plus className="w-3 h-3 mr-1" />
                  单个窗口
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => createMultipleWindows(3)}
                  className="text-xs"
                >
                  <Users className="w-3 h-3 mr-1" />
                  3个窗口
                </Button>
              </div>

              <div className="grid grid-cols-2 gap-2">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => createMultipleWindows(5)}
                  className="text-xs"
                >
                  <MessageSquare className="w-3 h-3 mr-1" />
                  5个窗口
                </Button>
                <Button
                  variant="destructive"
                  size="sm"
                  onClick={closeAllTestWindows}
                  className="text-xs"
                >
                  <X className="w-3 h-3 mr-1" />
                  关闭全部
                </Button>
              </div>

              {testWindows.length > 0 && (
                <div className="text-xs text-muted-foreground">
                  已创建 {testWindows.length} 个测试窗口
                </div>
              )}
            </CardContent>
          </Card>
        )}
      </div>
    </Draggable>
  );
} 